<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/taglib_include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, target-densitydpi=medium-dpi, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="${ctx}/css/main.css?ver=${main_css_version}" rel="stylesheet" type="text/css" />
<%-- <link href="${ctx}/css/tipso.min.css" rel="stylesheet" type="text/css" /> --%>
<style type="text/css">
  input,select {
      font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;
      font-size:18pt;
  }
</style>
<title>${projectTitle }</title>
</head>
<body>
  <header id="main-top">
    <a href="javascript:history.back(-1)">
      <div id="main-top-left">
        <img src="${ctx}/images/mui_title_back_btn.png" class="img-2">
      </div>
    </a>
    <div id="main-top-title">新用户注册</div>
  </header>
  <div id="container">
    <form action="${ctx}/register/add.do" method="post" autocomplete="on">
      <div id="login">
        <ul>
          <li class="registered"><label>用户名</label><input id="username" name="username" type="text" placeholder="必填项"/></li>
          <li class="registered"><label>设置密码</label><input id="password" name="password" type="password" placeholder="必填项"/></li>
          <li class="registered"><label>确认密码</label><input id="passwordConfirm" name="passwordConfirm" type="password"  placeholder="必填项"/></li>
          <li class="registered"><label>真实姓名</label><input id="fullname" name="fullname" type="text"  placeholder="必填项"/></li>
          <li class="registered"><label>性别</label>
            <select name="gender">
                <c:forEach var="gender" items="${genderMap}">
                  <option value="${gender.key}">${gender.value}</option>
                </c:forEach>
            </select>
          </li>
          <li class="registered"><label>手机号码</label><input id="mobile" name="mobile" type="text" placeholder="必填项"/></li>
          <li class="registered"><label>出生日期</label><input id="birthday" name="birthday" type="date" placeholder="必填项"/></li>
          <li class="registered"><label>证件类型</label>
            <select name="identificationType" id="identificationType">
                <c:forEach var="identification" items="${identificationMap}">
                  <option value="${identification.key}">${identification.value}</option>
                </c:forEach>
            </select>
          </li>
          <li class="registered"><label>证件号码</label><input id="identificationNumber" name="identificationNumber" type="text" placeholder="必填项"/></li>
          <li class="registered"><label>乘客类型</label>
            <select name="passengerType">
              <c:forEach var="passenger" items="${passengerMap}">
                <option value="${passenger.key}">${passenger.value}</option>
              </c:forEach>
            </select>
            <c:if test="${not empty returnUrl}">
            <input type="hidden" name="returnUrl" value="${returnUrl}"/>
            </c:if>
          </li>
        </ul>
      </div>
    </form>
  </div>
  <div id="big-button">
    <a id="regButton" href="javascript:void(0);">
      <div id="determine" style="letter-spacing:0pt;margin-bottom:25pt;">注册并登录</div>
    </a>
  </div>
  <script type="text/javascript" src="${ctx}/js/jquery.min.js?ver=${jquery_min_version}"></script>
  <script type="text/javascript">
    var pattern = new RegExp("^[a-zA-Z0-9]{4,16}$"); // 匹配用户名的正则表达式，4到6位字母和数字
    var patternCN = new RegExp("^[\u4E00-\u9FA5\uF900-\uFA2D]*$");// 匹配中文
    var reg = /^[\u4E00-\u9FA5]{1}\d{8}$/; //匹配军官证
    // 注册表单参数类
    var formObj = {
    		username:'',
    		password:'',
    		passwordConfirm:'',
    		fullname:'',
    		mobile:'',
    		birthday:'',
    		identificationNumber:''
    }
    // 注册校验
    function verify(form) {
    	var isNotBlank = (form.username != '' && form.password != '' && form.passwordConfirm != '' && form.fullname != '' && form.mobile != '' && form.birthday != '' && form.identificationNumber != '');
    	if (isNotBlank) {
    		if (patternCN.test(form.username)) {
    			if (form.username.length >= 2 && form.username.length <= 8) {
    			} else {
    				alert("用户名请输入2-8个汉字, 4-16位字母或数字");
    				return false;
    			}
    		} else if (!pattern.test(form.username)) {
                alert("用户名请输入2-8个汉字, 4-16位字母或数字");
                return false;
            }
    		if (formObj.password != formObj.passwordConfirm) {
    			alert("设置密码和确认密码输入不一致！");
    			return false;
    		}
    		
    		var identificationType = $("#identificationType").val();
    		var officercard = ${constant.IdentificationType_officercard};
    		if(identificationType==officercard){
    			if(!reg.test(form.identificationNumber)){ 
    				alert("军官证输入有误"); 
    				return false; 
    			} 
    		}
    		return true;
    	} else {
    		alert("注册信息填写不完整！");
    		return false;
    	}
    }
    $(document).ready(function() {
    	var usernameJqObj = $('#username');
    	var passwordJqObj = $('#password');
    	var passwordConfirmJqObj = $('#passwordConfirm');
    	var fullnameJqObj = $('#fullname');
    	var mobileJqObj = $('#mobile');
    	var birthdayJqObj = $('#birthday');
    	var identificationNumberJqObj = $('#identificationNumber');
        // 注册按钮事件绑定
        $("#determine").bind("click", function(e) {
        	formObj.username = usernameJqObj.val();
        	formObj.password = passwordJqObj.val();
        	formObj.passwordConfirm = passwordConfirmJqObj.val();
        	formObj.fullname = fullnameJqObj.val();
        	formObj.mobile = mobileJqObj.val();
        	formObj.birthday = birthdayJqObj.val();
        	formObj.identificationNumber = identificationNumberJqObj.val();
            // 验证通过，提交表单
        	if(verify(formObj)) {
        		$("form").submit();
        	}

        });
    });
  </script>
</body>
</html>